import React, { useEffect, useState } from "react";
import "./index.scss";
function XtxCheckoutBox(props: {
  modelValue: boolean;
  children: React.ReactElement;
  updateModelValue: (playload: boolean) => void;
  change?: (playload: boolean) => void;
}) {
  const [checked, setChecked] = useState(false);
  useEffect(() => {
    setChecked(props.modelValue);
  }, [props.modelValue]);
  const change = function () {
    const newChecked = !checked; // 计算新的 checked 状态
    setChecked(newChecked); // 更新组件本地状态
    props.updateModelValue(newChecked); // 通知父组件新的状态
    props.change && props.change(newChecked);
  };
  return (
    <div className="xtx-checkbox" onClick={change}>
      {checked ? (
        <i className="iconfont icon-checked"></i>
      ) : (
        <i className="iconfont icon-unchecked"></i>
      )}

      {props.children && props.children}
    </div>
  );
}
export default XtxCheckoutBox;
